<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="container">
            <h1>你好</h1>
            <div class="row">
                <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
                inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <h4>第一列</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
                    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                     <h4>第二列--分为四个盒子</h4>
                        <div class="row">
                            <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                                <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                                        assumenda minim organic quis.</p>
                            </div>
                            <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                                <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                                        assumenda minim organic quis.</p>
                            </div>
                            <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                                <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                                        assumenda minim organic quis.</p>
                            </div>
                            <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                                <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                                        assumenda minim organic quis.</p>
                            </div>

                            </div>
                        </div>
                </div>
            </div>

        </div>
    </body>
</html>